<!DOCTYPE html>
<html lang="zh-cn" class="pui-app" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <meta name="renderer" content="webkit" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="description" content="Plane UI" />
    <meta name="keywords" content="Plane UI" />
    <title>宠-首页</title>

    <link rel="stylesheet" type="text/css" href="/planeui/dist/css/planeui.css" />
    <style>
        .iScrollIndicator {
            width: 5px !important;
            border: none !important;
        }
    </style>
</head>
<body>
<!--[if lte IE 9]>
<div class="pui-layout pui-browsehappy">
    <a href="javascript:;" class="pui-close" onclick="document.body.removeChild(this.parentNode);"></a>
    <p>您正在使用 <strong class="pui-text-yellow pui-text-xl">过时</strong> 的非现代浏览器，<strong class="pui-text-success pui-text-xl">91.23%</strong> 的人选择 <a href="http://browsehappy.com/" target="_blank" class="pui-text-green-400 pui-text-xl"><strong>升级浏览器</strong></a>，获得了更好、更安全的浏览体验！</p>
</div>
<![endif]-->
<div class="pui-layout pui-app-layout">
    <div class="pui-side-slide-left">
        <div style="height:2000px;">左侧滑出层</div>
    </div>
    <div class="pui-side-slide-top">
        <div style="height:400px;">顶部滑出层</div>
    </div>
    <div class="pui-app-main pui-app-main-prev">
        <header class="pui-app-header pui-bg-blue-300">
            <div class="pui-app-header-aside">
<!--                <a href="javascript:;" pui-side-slide="left">-->
                <a href="javascript:;">
                    <i class="fa fa-2x pui-text-white">宠</i>
<!--                    <i class="fa fa-list fa-2x pui-text-white"></i>-->
                </a>
            </div>
            <div class="pui-app-header-middle" pui-side-slide="top">
                <strong class="pui-h4 pui-text-white">那些温暖的宠</strong>
            </div>
            <div class="pui-app-header-offside">
<!--                pui-side-slide="right"-->
                <a href="javascript:;"  class="pui-text-white pui-text-xxxxl" style="line-height:1;line-height:1;padding: 3px 12px 5px;">
<!--                    +-->
                </a>
            </div>
        </header>
        <div style="padding-top:5px;">
            <a href="javascript:;"><img src="https://img.zcool.cn/community/014bc95af50428a8012160450b7270.jpg@2o.jpg" class="pui-img-responsive" width="100%"
            height="100px;"/></a>
        </div>
        <div class="pui-app-main-container" id="wrapper1" style="padding:10px;">
            <input type="hidden" id="leftOrRight" value="0"/>
            <div class="content">
                <!-- 瀑布流样式开始 -->
                <div class="pui-flexbox" style="align-item:center;">
                    <div class="box pui-flex" id="leftList">
                            <!--左边图片-->
                    </div>
                    <div class="box pui-flex" id="rightList">
                        <!--右边图片-->
                    </div>
                </div>
            </div>
        </div>
        <!-- footer -->
        <div th:replace="/common/footer.html"></div>
    </div>
<!--    <div class="pui-app-main pui-app-main-next" style="overflow:auto;-webkit-overflow-scrolling: touch;">-->
<!--        <header class="pui-app-header pui-bg-blue-300">-->
<!--            <div class="pui-app-header-aside">-->
<!--                <a href="javascript:;" style="padding: 6px 15px;" prev-page="/about"><i class="fa fa-angle-left fa-3x pui-text-white"></i></a>-->
<!--            </div>-->
<!--            <div class="pui-app-header-middle" pui-side-slide="top">-->
<!--                <strong class="pui-h4 pui-text-white pui-text-left">试听歌曲</strong>-->
<!--            </div>-->
<!--            <div class="pui-app-header-offside">-->
<!--                <a href="javascript:;" style="padding: 14px 15px 9px;"><i class="fa fa-share-square-o fa-2x pui-text-white"></i></a>-->
<!--            </div>-->
<!--        </header>-->
<!--        <div class="pui-app-main-container" id="wrapper2">-->
<!--            <div class="pui-app-scroller2" style="">-->
<!--                <p><img src="https://www.jq22.com/demo/jQuery-pbl20161013/images/24.jpg" class="pui-img-responsive" width="100%" /></p>-->
<!--                <p><img src="https://www.jq22.com/demo/jQuery-pbl20161013/images/24.jpg" class="pui-img-responsive" width="100%" /></p>-->
<!--                <p><img src="https://www.jq22.com/demo/jQuery-pbl20161013/images/24.jpg" class="pui-img-responsive" width="100%" /></p>-->
<!--                <p><img src="https://www.jq22.com/demo/jQuery-pbl20161013/images/24.jpg" class="pui-img-responsive" width="100%" /></p>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
<!--    <div class="pui-side-slide-right">-->
<!--        <div style="height:2000px;">右侧滑出层</div>-->
<!--    </div>-->
<!--    <div class="pui-side-slide-bottom">-->
<!--        <div style="height:400px;">底部滑出层</div>-->
<!--    </div>-->
</div>

<!--[if (gte IE 9) | !(IE)]><!-->
<script type="text/javascript" src="/planeui/app/js/jquery-2.1.1.min.js"></script>
<!--<![endif]-->

<!--[if lt IE 9]>
<script type="text/javascript" src="/planeui/app/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="/planeui/dist/js/planeui.patch.ie8.js"></script>
<![endif]-->

<!--[if lt IE 10]>
<script type="text/javascript" src="/planeui/dist/js/planeui.patch.ie9.js"></script>
<![endif]-->
<script type="text/javascript" src="/planeui/dist/js/planeui.js"></script>
<script type="text/javascript" src="/planeui/app/js/iscroll.js"></script>
<script type="text/javascript" src="/js/index.js"></script>
<script type="text/javascript">
    // var scroller;
    //
    // //document.addEventListener("touchstart", function(){}, true);
    // //document.addEventListener('touchmove', function (e) {
    // //e.preventDefault();
    // //}, false);
    // //document.addEventListener('DOMContentLoaded', loaded, false);
    //
    // $(function() {
    //     if (!/iPad|iPhone|iPod/.test(navigator.userAgent))
    //     {
    //         $(".pui-app-main-container").css("overflow", "hidden");
    //
    //         scroller = new IScroll("#wrapper1", {
    //             scrollbars: true,
    //             mouseWheel: true,
    //             interactiveScrollbars: true,
    //             shrinkScrollbars: 'scale',
    //             fadeScrollbars: true
    //         });
    //     }
    //
    //     $("header, footer").bind("touchmove", function(e){
    //         e.preventDefault();
    //     });
    //
    //     $().sideSlide();
    //     $().sidePosition();
    // });
</script>
</body>
</html>